<template>
  <div id="app">
    <div class="page"
         v-if="!$route.meta.screen">
      <Layout></Layout>
      <!-- <div id="nav">
        <router-link
          v-for="r in routes"
          :key="r.name"
          :to="r.name"
          :class="{ active: r.isActive }"
          class="link"
          >{{ r.title }}</router-link
        >
      </div>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <template>
        <router-view v-if="!$route.meta.keepAlive" />
      </template> -->
    </div>
    <div class="page"
         v-else>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <template>
        <router-view v-if="!$route.meta.keepAlive" />
      </template>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex';
import Layout from './layout';
export default {
  name: 'entry-application',
  components: {
    Layout,
  },
  data() {
    return {
      routes: [
        { name: '/app-typescript', title: 'app-typescript' },
        { name: '/app-javascript', title: 'app-javascript' },
      ],
    };
  },
  mounted() {},
  //计算属性
  computed: {
    ...mapGetters({
      name: 'name',
      name1: 'app-javascript/name',
    }),
  },
  watch: {
    $route({ path }) {
      if (typeof path === 'undefined') {
        return;
      }
      // remove active class
      const oldActivedRoute = this.routes.find((v) => v.isActive);
      if (oldActivedRoute) {
        oldActivedRoute.isActive = false;
      }
      // add active class
      const activedRoute = this.routes.find(({ name }) =>
        path.startsWith(name),
      );
      if (activedRoute) {
        activedRoute.isActive = true;
      }
    },
  },
};
</script>

<style>
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  height: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.page {
  height: 100%;
}

#nav {
  padding: 30px;
}

#nav a {
  padding: 0 10px;
  font-weight: bold;
  color: #2c3e50;
}

#nav a.active,
#nav a.router-link-exact-active {
  color: #ea6e76;
}
</style>
